<template>
  <div class="xuanfu">
    <el-tabs v-model="name" :tab-position="tabPosition" type="card" :stretch="stretch" @tab-click="tabClick">
      <el-tab-pane label="首页" name="1" class="pane">
        <template #label>
          <i class="el-icon-date" />
          <span>首页</span>
        </template>
      </el-tab-pane>
      <el-tab-pane label="所有宝贝" name="2">配置管理</el-tab-pane>
      <el-tab-pane label="招募令" name="3">角色管理</el-tab-pane>
      <el-tab-pane label="购物车" name="4">定时任务补偿</el-tab-pane>
      <el-tab-pane label="我的订单" name="5">定时任务补偿</el-tab-pane>
    </el-tabs>
  </div>

</template>

<script>
export default {
  data() {
    return {
      tabPosition: 'bottom',
      stretch: true,
      name: '2'
    }
  },
  methods: {
    tabClick(v) {
      console.log(v)
    }
  }
}
</script>

<style>
.xuanfu {
  left: 0;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 100;
}
.pane {
  width: 20%;
}
</style>
